<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
		<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
		<script src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
		<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
		<style>
			/* 整体样式 */
			body {
				background: #ad5389;
				/* fallback for old browsers */
				background: linear-gradient(to right, #3c1053, #ad5389);
				margin: 0;
				padding: 0;
			}

			.container {
				margin: 0 auto;
				width: 400px;
				padding-top: 100px;
			}

			form {
				width: 450px;
				margin: 0 auto;
				background: #FFF;
				border-radius: 15px;
				position: relative;
			}

			h1 {
				font-size: 28px;
				text-align: center;
				color: #FFF;
			}

			.p {
				color: red;
				margin-left: 33px;
				display: inline-block; //不占单独一行的块级元素
			}

			label {
				font-size: 18px;
				font-weight: bold;
			}

			.register {
				height: 35px;
				width: 300px;
			}

			.q {
				color: red;
				margin-left: 17px;
				display: inline-block;
			}

			.checkbox {
				margin-left: 100px;
				display: inline-block;
				width: 15px;
				height: 15px;
			}

			.submit {
				border-radius: 7px;
				margin-left: 150px;
				height: 35px;
				width: 150px;
				background-color: #000;
				border: none;
				display: block;
				padding: 0;
				color: #FFF;
				font-weight: bold;
				cursor: pointer;
			}

			a {
				text-decoration: none;
				font-weight: bold;
			}

			.left,
			.right {
				position: absolute;
				bottom: 20px;
			}

			.left {
				left: 20px;
			}

			.right {
				right: 20px;
			}
			.title {
				color: black;
				font-size: 18px;
				font-weight: 200;
				padding-left: 50px;
				margin-bottom: 10px;
			}
			
			.title span {
				border-bottom: 3px solid rgb(237, 221, 22);
			}
			
			
		</style>
	</head>
	<body>
		<div class="container">
			<form>
				<br>
				<div class="title"><span>注册</span></div>
				<span class="p">*</span>
				<label for="username">用户名</label>
				<input type="text" name="" id="username" placeholder="" class="register"><br><br>
				<span class="p">*</span>
				<label for="phonenumber">手机号</label>
				<input type="text" name="" id="phonenumber" class="register">
				<br><br>
				<span class="q">*</span>
				<label for="pwd">登录密码</label>
				<input type="password" name="" id="pwd" class="register"><br><br>
				<span class="q">*</span>
				<label for="c_pwd">确认密码</label>
				<input type="password" name="" id="c_pwd" class="register"><br><br>
				<span class="p">*</span>
				<label for="verify">验证码</label>
				<input type="text" id="verify" class="register" name=""><br><br>
				<input type="checkbox" class="checkbox" name="">
				<span style="font-size:15px">我已阅读并同意《用户注册协议》</span>
				<br><br>
				<input type="submit" name="" value="同意以上协议并注册" class="submit" onclick="register(this)"><br>
				<a href="../login.html" class="left">返回首页</a>
				<a href="../login.html" class="right">开始登录</a>
			</form>
		</div>
		<script>
			var checkbox = document.getElementsByClassName('checkbox');

			function register(btn) {
				if (checkbox[0].checked == true) {
					alert("注册成功！");
				} else {
					alert("请先阅读并同意《用户注册协议》！")
				}
			}
		</script>
	</body>
</html>